<template>
  <div id="user">
    <div class="bgc">
      <van-row class="user">
        <van-col span="24" class="user-box1">
          <van-nav-bar title="个人中心" />
        </van-col>
        <!-- 头像/ -->
        <van-col span="24" class="user-box2" @click="onGoLogin" v-if="!username">
          <van-col span="7" class="user-box2-img">
            <div>
              <van-image src="" round>
                <template v-slot:error>加载失败</template>
              </van-image>
            </div>
          </van-col>
          <van-col span="17">
            <h3>点击登录</h3>
          </van-col>
        </van-col>
        <!-- 头像/ -->
        <van-col span="24" class="user-box2" v-else @click="$router.push('/modify')">
          <van-col span="7">
            <div>
              <img :src="username.avatar" alt="" class="van-image" />
            </div>
          </van-col>
          <van-col span="17">
            <h3>{{ username.nickname }}</h3>
          </van-col>
        </van-col>
        <!-- 我的订单 -->
        <van-col span="24" class="user-box3">
          <van-cell title="我的订单" is-link />
          <van-grid clickable column-num="5" :border="false">
            <van-grid-item :icon="item.icon" :text="item.text" v-for="(item, index) in MyOrderList" :key="index" @click="onGoOrder(item, index)" />
          </van-grid>
        </van-col>
        <!-- 核心服务 -->
        <van-col span="24" class="user-box3">
          <van-cell title="核心服务" class="title-dingdan" />
          <van-grid clickable column-num="5" :border="false">
            <van-grid-item to="/mycoupon" icon="coupon-o" text="优惠券" />
            <van-grid-item to="/Collection" icon="star-o" text="商品收藏" />
            <van-grid-item to="/history" icon="underway-o" text="浏览足迹" />
            <van-grid-item icon="friends-o" text="我的拼团" />
            <van-grid-item to="/ress" icon="hotel-o" text="地址管理" />
          </van-grid>
        </van-col>
        <!-- 必备工具 -->
        <van-col span="24" class="user-box3">
          <van-cell title="必备工具" class="title-dingdan" />
          <van-grid clickable column-num="5" :border="false">
            <van-grid-item icon="refund-o" text="绑定手机" />
            <van-grid-item icon="shield-o" text="帮助中心" />
            <van-grid-item icon="records" text="意见反馈" />
            <van-grid-item icon="smile-comment-o" text="联系客服" />
            <van-grid-item icon="info-o" text="关于我们" />
          </van-grid>
        </van-col>
        <van-col span="24" class="outLogin" v-if="username">
          <van-button size="large" @click="onOutLogin">退出登录</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name,
  data() {
    return {
      username: '',
      MyOrderList: [
        { text: '待付款', icon: 'refund-o' },
        { text: '代发货', icon: 'logistics' },
        { text: '待收货', icon: 'photo-o' },
        { text: '待评价', icon: 'refund-o' },
        { text: '售后', icon: 'free-postage' }
      ]
    }
  },
  mounted() {
    // 切换页面是否有登录
    let token = this.$jsCookie.get('token')
    if (!token) return Toast('请登录')
    // 当页面刷新 重新获取用户信息
    this.onInquireUser()
  },
  methods: {
    onGetUser() {
      this.username = ''
    },
    onGoOrder(item, index) {
      console.log(index)
      this.$router.push('/MyOrder')
      this.$store.commit('PassMyOrderStatus', index)
    },
    // 获取用户信息
    onInquireUser() {
      this.$get('auth/info')
        .then(result => {
          console.log(result)
          this.username = result.data.data
        })
        .catch(err => {})
    },
    onGoLogin() {
      this.$router.push('/login')
    },
    // 退出登录
    onOutLogin() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      setTimeout(() => {
        this.$post('auth/logout')
          .then(result => {
            this.$jsCookie.remove('user')
            this.$jsCookie.remove('token')
            Toast.fail('退出成功!')
            this.onGetUser()
          })
          .catch(err => {})
      }, 2000)
    }
  }
}
</script>
<style lang="less" scoped>
.outLogin {
  .van-button {
    color: red;
  }
  margin-top: 20px;
  background-color: #fff;
}
.user {
  // 头像。=
  .user-box2 {
    width: 100%;
    background-color: #ab956d;
    padding: 10px 25px;
    img {
      width: 100%;
      border-radius: 50%;
    }
    .van-col {
      padding: 10px;
      div {
        width: 100%;
        height: 80px;
        border-radius: 50%;
        background-color: #dee1e6;
        .van-image {
          width: 100%;
        }
      }
    }
    h3 {
      font-weight: 300;
      font-size: 20px;
      color: #fff;
      margin: 20px 0px 10px 5px;
    }
  }
  .user-box3 {
    background-color: #fff;
    .van-cell__title {
      span {
        font-size: 16px;
        font-weight: 600;
      }
    }
    .title-dingdan {
      background-color: #f4f4f4 !important;
    }
    .van-grid {
      opacity: 0.65;
      border-bottom: 2px solid #c7c5c5;
    }
  }
}
</style>
